CSSの基本（20）−表のデザインを指定する
今回は、CSSを使って表（TABLE）のデザインを指定する方法を紹介します。このテクニックを使うには、枠線や背景色、文字の書式、余白など、CSSを使った書式指定の基本をフル活用する必要があります。CSSの復習もか兼ねて、その活用方法をもう一度研究してみましょう。

→ 表全体と見出しセルの書式を指定する
 
表全体の書式は、TABLEタグに対して指定します。たとえば以下の例では、次のような書式を指定しています。
  ・ 背景色は緑色（#009900）
  ・ 表全体の外枠は立体的な枠線
  ・ 枠線の重なりは「なし」
同様に、見出しとなるTHタグに対しても、その書式をCSSで指定します。
  ・ セルの背景色は緑色（#009900）
  ・ セルの左側に白い点線の枠線
  ・ セルの内部余白は10ピクセル
  ・ 文字サイズは16ポイント
  ・ 太字
  ・ 文字色は白色
ここまで指定した時点で表（TABLE）を表示させると、以下のサンプルのようになります。現時点では“黒板風の表”といえるでしょう。このまま進めても面白いと思いますが、スタイルシートを詳しく学習するためにも、別のデザインを作成していきましょう。
<STYLE type="text/css">
TABLE{
  background-color:#009900;
  border:12px #FFCC00 ridge;
  border-collapse:collapse;
}
TH{
  background-color:#009900;
  border-left:1px #FFFFFF dashed;
  padding:10px;
  font-size:16pt;
  font-weight:bold;
  color:#FFFFFF;
}
</STYLE>

<BODY>
  ：
<TABLE>
<TR><TH>月日</TH><TH>会議室A</TH><TH>会議室B</TH><TH>会議室C</TH></TR>
<TR><TD>12月4日</TD><TD>×</TD><TD>×</TD><TD>×</TD></TR>
<TR><TD>12月5日</TD><TD>○</TD><TD>×</TD><TD>○</TD></TR>
<TR><TD>12月6日</TD><TD>○</TD><TD>○</TD><TD>○</TD></TR>
<TR><TD>12月7日</TD><TD>○</TD><TD>×</TD><TD>○</TD></TR>
<TR><TD>12月8日</TD><TD>×</TD><TD>○</TD><TD>○</TD></TR>
</TABLE>
  ： 		サンプルページ


→ セルの書式を指定する
 
続いて、通常のセルの書式を追加します。今回は以下のような書式を指定しました。ここでのポイントは、緑色（#009900）の点線を描画するために、白色の点線を指定していることです。というのも、表の背景色が緑色（#009900）であるため、そこに緑色（#009900）の点線を描画しても点線に見えないからです。そこで、発想を逆転し、白色の点線を指定することで、緑色の点線を再現しています。
  ・ セルの背景色は白色（#FFFFFF）
  ・ セルの枠線は白い点線
  ・ セルの内部余白は10ピクセル
  ・ 文字サイズは16ポイント
  ・ 太字
  ・ 文字は中央揃え
そのほか「×」の文字を赤字で表示するために、 red というクラスを作成し、このクラスに対してのみ「文字色は赤色」のCSSを指定しています。
<STYLE type="text/css">
TABLE{
  ：
}
TH{
  ：
}
TD{
  background-color:#FFFFFF;
  border:1px #FFFFFF dashed;
  padding:10px;
  font-size:16pt;
  font-weight:bold;
  text-align:center;
}
TD.red{
  color:#FF0000;
}
</STYLE>

<BODY>
  ：
<TABLE>
<TR><TH>月日</TH><TH>会議室A</TH><TH>会議室B</TH><TH>会議室C</TH></TR>
<TR><TD>12月4日</TD><TD class="red">×</TD><TD class="red">×</TD><TD class="red">×</TD></TR>
<TR><TD>12月5日</TD><TD>○</TD><TD class="red">×</TD><TD>○</TD></TR>
<TR><TD>12月6日</TD><TD>○</TD><TD>○</TD><TD>○</TD></TR>
<TR><TD>12月7日</TD><TD>○</TD><TD class="red">×</TD><TD>○</TD></TR>
<TR><TD>12月8日</TD><TD class="red">×</TD><TD>○</TD><TD>○</TD></TR>
</TABLE>
  ： 		サンプルページ
注） このサンプルは、Internet Explorer 6.0を対象ブラウザとして作成されています。そのため、その他のブラウザでは表示に違いが見られますが、ご了承くださいますようお願いいたします。


→ 特定のセルの書式を指定する
 
これで、表のデザインの基本が完成しました。続いては「月日」のセルだけデザインを変更してみましょう。今回は、THとTDタグに"md"というクラスを作成し、このクラスに対してCSSを指定しました。THタグ（クラス"md"）の書式は、右の枠線を白色の2ポイントの実線に変更しました。また、TDタグ（クラス"md"）も、右の枠線を緑色の2ポイントの実線に変更し、さらに背景色に薄い緑色（#CCFFCC）を指定しています。このほかにも、表を見やすくするための工夫はいくらでも考えられると思います。CSSを有効に活用して、素敵なホームページを作成してください。
<STYLE type="text/css">
TABLE{
  ：
}
TH{
  ：
}
TH.md{
  background-color:#009900;
  border-right:2px #FFFFFF solid;
  padding:10px;
  font-size:16pt;
  font-weight:bold;
  color:#FFFFFF;
}
TD{
  ：
}
TD.red{
  ：
}
TD.md{
  background-color:#CCFFCC;
  border:1px #FFFFFF dashed;
  border-right:2px #009900 solid;
  padding:10px;
  font-size:16pt;
  font-weight:bold;
  text-align:center;
}
</STYLE>

<BODY>
  ：
<TABLE>
<TR><TH class="md">月日</TH><TH>会議室A</TH><TH>会議室B</TH><TH>会議室C</TH></TR>
<TR><TD class="md">12月4日</TD><TD class="red">×</TD><TD class="red">×</TD><TD class="red">×</TD></TR>
<TR><TD class="md">12月5日</TD><TD>○</TD><TD class="red">×</TD><TD>○</TD></TR>
<TR><TD class="md">12月6日</TD><TD>○</TD><TD>○</TD><TD>○</TD></TR>
<TR><TD class="md">12月7日</TD><TD>○</TD><TD class="red">×</TD><TD>○</TD></TR>
<TR><TD class="md">12月8日</TD><TD class="red">×</TD><TD>○</TD><TD>○</TD></TR>
</TABLE>
  ： 		サンプルページ
注） このサンプルは、Internet Explorer 6.0を対象ブラウザとして作成されています。そのため、その他のブラウザでは表示に違いが見られますが、ご了承くださいますようお願いいたします。


PC�p�����y�����l���g�����������}�W�������������z �����������O�~�y�������������z Yahoo �y�V NTT-X Store

�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q���� ���������[�� �C�O���s�����������I �C�O�z�e��